<template>
	<view>
		<view class="template-index tn-safe-area-inset-bottom">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar fixed alpha :isBack="false" :bottomShadow="false">
				<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
					<!-- 图标logo -->
					<!-- <view class="custom-nav__back" @click="tn('/homePages/about')">
          <view class="logo-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
            <view class="logo-image">
            </view>
          </view> -->
					<!-- <view class="tn-icon-left"></view> -->
					<!-- </view> -->
					<!-- 搜索框 -->
					<!-- <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center" @click="tn('/homePages/search')">
          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left" style="background-color: rgba(230,230,230,0.3);">
            <view class="custom-nav__search__icon tn-icon-search tn-color-white"></view>
            <view class="custom-nav__search__text tn-padding-left-xs tn-color-white">搜索 图鸟模板</view>
          </view>
        </view> -->
				</view>
			</tn-nav-bar>

			<swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="3000"
				@change="cardSwiper">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item image-banner">
						<image :src="item" mode="aspectFill"></image>
					</view>
					<view class="swiper-item-text">
						<view class="tn-text-bold tn-color-white" style="font-size: 90rpx;">{{item.title}}</view>
						<view class="tn-color-white tn-padding-top" style="font-size: 30rpx;">{{item.name}}</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="indication">
				<block v-for="(item,index) in swiperList" :key="index">
					<view class="spot" :class="cardCur==index?'active':''"></view>
				</block>
			</view>


			<view class="tn-flex tn-flex-row-between tn-padding-sm">
				<view class="list-image-text">
					<view class="list__left">
						<image src="../../static/clock.png" class="list__left__image"></image>
						<view class="list__left__text tn-text-lg tn-color-grey">距离活动结束时间</view>
					</view>
				</view>
			</view>
			<view class="tn-flex">
				<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
							<!-- <tn-circle-progress :percent="days_rate" :width="122" :borderWidth="6" activeColor="#892FE8">
			  <view class="tn-flex tn-flex-direction-column tn-flex-col-center" style="width: 100rpx;height: 100rpx;">
				<image class="tn-flex index-list-item__image" style="width: 65rpx;height: 65rpx;" src="../../static/day_icon.png"></image>
				<text class="tn-flex tn-color-blue" style="font-size: 30rpx;font-weight: bold;">{{ days }}</text>
			  </view>
			</tn-circle-progress> -->
							<!-- <circle-progress :value="value" :widths="widths" :breadth="breadth"></circle-progress> -->
							<circle-progress :value="dayRate" :widths="widths" :breadth="breadth"
								:activeColor="dayActiveColor" :icon="dayIcon" :number="days">
							</circle-progress>
						</view>
						<view class="tn-color-black tn-text-center">
							<text class="tn-text-ellipsis" :color="dayActiveColor">天</text>
						</view>
					</view>
				</view>
				<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
							<!-- <tn-circle-progress :percent="50" :width="122" :borderWidth="6" activeColor="#FFCA28" style="position: absolute;">
              <view class="tn-flex tn-flex-direction-column tn-flex-col-center" style="width: 100rpx;height: 100rpx;">
				<image class="index-list-item__image" style="width: 65rpx;height: 65rpx;" src="../../static/hour_icon.png"></image>
				<text class="tn-color-blue" style="font-size: 30rpx;font-weight: bold;">{{ hours }}</text>
              </view>
            </tn-circle-progress> -->
							<circle-progress :value="hourRate" :widths="widths" :breadth="breadth"
								:activeColor="hourActiveColor" :icon="hourIcon" :number="hours">
							</circle-progress>
						</view>
						<view class="tn-color-black tn-text-center">
							<text class="tn-text-ellipsis" :color="hourActiveColor">时</text>
						</view>
					</view>
				</view>
				<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
							<!-- <tn-circle-progress :percent="50" :width="122" :borderWidth="6">
              <view class="tn-flex tn-flex-direction-column tn-flex-col-center" style="width: 100rpx;height: 100rpx;">
				<image class="tn-flex index-list-item__image" style="width: 65rpx;height: 65rpx;" src="../../static/min_icon.png"></image>
				<text class="tn-flex tn-color-blue" style="font-size: 30rpx;font-weight: bold;">{{ minutes }}</text>
              </view>
            </tn-circle-progress> -->
							<circle-progress :value="minuteRate" :widths="widths" :breadth="breadth"
								:activeColor="minuteActiveColor" :icon="minuteIcon" :number="minutes">
							</circle-progress>
						</view>
						<view class="tn-color-black tn-text-center">
							<text class="tn-text-ellipsis" :color="minuteActiveColor">分</text>
						</view>
					</view>
				</view>
				<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
							<!-- <tn-circle-progress :percent="50" :width="122" :borderWidth="6" activeColor="#31E749">
              <view class="tn-flex tn-flex-direction-column tn-flex-col-center" style="width: 100rpx;height: 100rpx;">
				<image class="tn-flex index-list-item__image" style="width: 65rpx;height: 65rpx;" src="../../static/sec_icon.png"></image>
				<text class="tn-flex tn-color-blue" style="font-size: 30rpx;font-weight: bold;">{{ seconds }}</text>
              </view>
            </tn-circle-progress> -->
							<circle-progress :value="secondRate" :widths="widths" :breadth="breadth"
								:activeColor="secondActiveColor" :icon="secondIcon" :number="seconds">
							</circle-progress>
						</view>
						<view class="tn-color-black tn-text-center">
							<text class="tn-text-ellipsis">秒</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 方式12 end-->

			<!-- banner start-->
			<view class="tn-flex">
				<view class="tn-flex tn-flex-1 tn-flex-col-top"
					style="margin: 20rpx 15rpx; border-radius: 15rpx;background-color: #fff8f8;padding-top:10rpx;padding-bottom: 10rpx;">
					<view class="tn-col-6 tn-margin-xs tn-flex-direction-column">
						<view class="justify-content-item tn-padding-top tn-text-center tn-radius tn-text-bold"
							style="font-size: 44rpx;color:#d5519b;">
							{{ views_num }}
						</view>
						<view class="justify-content-item tn-text-center tn-radius"
							style="font-size: 28rpx;color:#c2bdc1">
							浏览量
						</view>
					</view>
					<view class="tn-col-6 tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
						<view class="justify-content-item tn-radius tn-padding-left-sm tn-padding-right-sm tn-text-bold"
							style="font-size: 44rpx;color:#d5519b;">
							<view class="logo-pic tn-shadow-blur" :style="'background-image:url(' + redQX + ')'">
								<view class="logo-image">
								</view>
							</view>
						</view>
						<view class="tn-text-center tn-padding-left-sm tn-padding-right-sm">
							<tn-avatar-group :lists="viewsList" size="sm"></tn-avatar-group>
						</view>
					</view>
				</view>
				<view class="tn-flex tn-flex-1 about-shadow"
					style="margin: 20rpx 15rpx; border-radius: 15rpx;background-color: #fff8f8;padding-top:10rpx;padding-bottom: 10rpx;">
					<view class="tn-col-6 tn-margin-xs tn-flex-direction-column">
						<view class="justify-content-item tn-padding-top tn-text-center tn-radius tn-text-bold"
							style="font-size: 44rpx;color:#5520bb;">
							{{ buy_num }}
						</view>
						<view class="justify-content-item tn-text-center tn-radius"
							style="font-size: 28rpx;color:#c2bdc1">
							参加人数
						</view>
					</view>
					<view class="tn-col-6 tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
						<view class="justify-content-item tn-radius tn-padding-left-sm tn-padding-right-sm tn-text-bold"
							style="font-size: 44rpx;color:#d5519b;">
							<view class="logo-pic tn-shadow-blur" :style="'background-image:url(' + puQX + ')'">
								<view class="logo-image">
								</view>
							</view>
						</view>
						<view class="tn-text-center tn-padding-left-sm tn-padding-right-sm">
							<tn-avatar-group :lists="buyList" size="sm"></tn-avatar-group>
						</view>
					</view>
				</view>
			</view>
			<!-- banner end-->
			<view class="tn-flex tn-flex-wrap" style="height: 320rpx; overflow: hidden; width: 100%;">
				<!-- <view class="scroll-view tn-flex tn-flex-wrap tn-flex-row-around" style="width: 100%;" :animation="animationData"> 正常-->
				<view class="scroll-view tn-flex tn-flex-wrap tn-flex-row-around roll-center" style="width: 100%;">
					<view class="tn-flex tn-flex-row-around" v-for="(item, index) in imagelist" :key="index"
						style="width: 100%; height: 105rpx;">
						<view class="justify-content-item tn-text-center tn-radius" v-for="(img, idx) in item"
							:key="idx">
							<tn-avatar :border="true" borderColor="#ffa700" size="lg" :src="img"></tn-avatar>
						</view>
					</view>
				</view>
			</view>

			<view class="tn-flex tn-flex-row-between tn-padding-sm">

				<view class="list-image-text">
					<view class="list__left">
						<image src="../../static/star.png" class="list__left__image"></image>
						<view class="list__left__text tn-text-lg tn-color-grey">活动详情</view>
					</view>
				</view>
			</view>
			<view class="tn-margin-top-sm tn-margin-bottom-lg">
				<view class="news-img">
					<!-- <image :src="detail_image" mode='widthFix' class=''></image> -->
					<rich-text :nodes="detail_image"></rich-text>
				</view>
			</view>

			<!-- <tn-load-more class="tn-margin-top-sms" status="nomore" :loadText="shop_name"></tn-load-more> -->

			<view class="">
				<view class="icon15__item--icon2 tn-flex tn-flex-direction-column tn-flex-col-center button-0"
					@click="tn('/preferredPages/mine')">
					<!-- <button class="tn-text-center tn-flex-col-center" style="border-radius: 0; padding: 5rpx; background-color: rgba(255, 255, 255, 0.7)" @click="tn('/preferredPages/mine')"> -->
					<image class="tn-flex tn-text-center"
						style="height: 60rpx;width: 60rpx; background-color: rgba(255, 255, 255, 0)"
						src="../../static/geren.png"></image>
					<!-- </button> -->
					<text class="tn-flex tn-text-center tn-text-xs">个人中心</text>
					<!-- <view class="tn-icon-send-fill tn-color-white"></view> -->
				</view>
				<!-- <view class="icon15__item--icon2 tn-flex tn-flex-row-center tn-flex-direction-column tn-flex-col-center tn-flex-col-center button-0" >
	    <button class="tn-text-center tn-button--clear-style tn-flex-col-center" open-type="share" style="border-radius: 0;" @click="tn('/preferredPages/mine')">
			<image class="tn-flex tn-margin-top-sm tn-text-center" style="height: 60rpx;width: 60rpx;" src="../../static/geren.png"></image>
			<text class="tn-flex tn-text-center tn-text-xs">个人中心</text>
		</button>
	  </view> -->
				<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur button-1"
					@click="showModal">
					<tn-avatar src="../../../static/kefu.png"></tn-avatar>
					<text class="tn-text-xs" style="padding-left: 10rpx;">客服</text>
				</view>
				<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur button-2"
					@click="showPosterModal">
					<tn-avatar src="../../../static/poster.png"></tn-avatar>
					<text class="tn-text-xs" style="padding-left: 10rpx;">海报</text>
					<!-- <view class="tn-icon-send-fill tn-color-white"></view> -->
				</view>
			</view>
			<!-- <view class='tn-tabbar-height'></view> -->
			<!-- <view class='tn-tabbar-height'></view> -->

			<!-- <view class="bg-tabbar-shadow"></view> -->
			<!-- <tn-goods-nav :fixed="true" :safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav> -->
			<view v-if="payBtnShow && render==1"
				style="width: 100%; height: 120rpx; background-color: white;position:fixed;bottom: 0;z-index: 2089;display: flex; text-align: center;">
				<button
					style="border-radius: 50rpx; width: 100%;background-color: #000000; color:#ffffff;height: 80rpx;margin: 20rpx;line-height: 80rpx;box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);font-size: 36rpx;"
					@click="showPayPopup">{{ pay_title }}</button>
			</view>

			<tn-modal :v-model="false" :backgroundColor="backgroundColor" :width="width" :padding="padding"
				:radius="radius" :fontColor="fontColor" :fontSize="fontSize" :title="title" :content="content"
				:button="button" :showCloseBtn="closeBtn || !maskCloseable" :maskCloseable="maskCloseable" :zoom="zoom"
				:custom="custom" @click="clickBtn">
				<view v-if="custom">
					<view class="custom-modal-content">
						<tn-form :labelWidth="140">
							<tn-form-item label="手机号码" :borderBottom="false">
								<tn-input placeholder="请输入手机号码"></tn-input>
							</tn-form-item>
							<tn-form-item label="验证码" :borderBottom="false">
								<tn-input placeholder="请输入验证码"></tn-input>
								<view slot="right" class="tn-flex tn-flex-col-center tn-flex-row-center">
									<tn-button :fontSize="20" padding="10rpx" height="46rpx" backgroundColor="#01BEFF"
										fontColor="tn-color-white">获取验证码</tn-button>
								</view>
							</tn-form-item>
						</tn-form>
					</view>
				</view>
			</tn-modal>

			<!-- 客服压屏窗-->
			<tn-landscape :show="show" closePosition="bottom" @close="closeLandscape" style="z-index: 99999;">
				<view class="tn-margin-bottom-xl tn-padding-sm" style="width: 550rpx; height: 780rpx; 
	  background-color: #d5519b;border-radius:10rpx;">
					<view style="background-color: white; width: 100%;height: 100%;border-radius: 10rpx;">
						<view class="tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-center tn-padding">
							<text class="tn-flex tn-text-xxl tn-flex-col-center tn-flex-row-center"
								style="font-weight: bold;">联系客服</text>
							<text class="tn-flex tn-flex-col-center tn-flex-row-center tn-margin-top"
								style="font-weight: bold;">扫描下方二维码，立即联系客服</text>
						</view>
						<view class="tn-padding" style="width: 100%;height: 420rpx;padding-top:0;">
							<image style="width: 80%;display: block; margin: auto;" :src="support_qrcode"
								mode="widthFix">
							</image>
						</view>
						<view class="tn-flex tn-flex-col-center tn-flex-row-center"
							style="width: 100%; height: 130rpx;border-radius: 15rpx;">
							<view class="tn-flex tn-flex-wrap tn-flex-direction-column tn-flex-center  tn-padding-sm"
								style="background-color: #d5519b;width: 85%; height: 100%;border-radius: 15rpx;">
								<text class="align-content-item tn-flex-col-left tn-color-white"
									style="font-weight: bold;">联系电话</text>
								<text class="align-content-item tn-flex-col-left tn-color-white"
									style="font-weight: bold;margin-top: 10rpx;">{{ support_mobile }}</text>
								<tn-button class="align-content-item tn-margin-top tn-flex-row-right" size="sm"
									shape="round" :fontSize="20" padding="0 10rpx"
									@click="telephone(e)">一键拨打</tn-button>
							</view>
						</view>
					</view>
				</view>
				<!-- <image src="https://resource.tuniaokj.com/images/landscape/2022-new-year.png" mode="widthFix"></image> -->
			</tn-landscape>

			<!-- 海报压屏窗-->
			<tn-landscape :show="hbshow" closePosition="bottom" @close="closeHbLandscape" style="z-index: 99999;">
				<view class="tn-margin-bottom-xl" style="padding: 10rpx; width: 550rpx; height: 780rpx; 
	  background-color: #5520bb;border-radius:10rpx;">
					<view style="background-color: white; width: 100%;height: 100%;border-radius: 10rpx;">
						<view
							style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
							<image style="height: 100%;" mode="heightFix" :src="posterImg"
								:show-menu-by-longpress="true">
							</image>
						</view>
					</view>
				</view>
				<text class="tn-margin tn-color-white">长按上方图片保存并分享</text>
				<!-- <image src="https://resource.tuniaokj.com/images/landscape/2022-new-year.png" mode="widthFix"></image> -->
			</tn-landscape>

			<!-- 支付popup -->
			<tn-popup v-model="payShow" length="40%" mode="bottom" :backgroundColor="backgroundColor" :height="height"
				:borderRadius="borderRadius" :closeBtn="closeBtn" :closeBtnIcon="closeBtnIcon"
				:closeBtnPosition="closeBtnPosition" :maskCloseable="maskCloseable" @close="closedPopup">
				<view class="tn-flex popup-content tn-flex-direction-column"
					:class="{'popup-content--center': mode === 'center'}">
					<view class="tn-flex tn-flex-wrap tn-margin-bottom-lg"
						style="height:56rpx; overflow: hidden; width: 60%;">
						<!-- <scroll-view class="scroll-view tn-flex tn-flex-nowrap" ref="myScrollView" :scroll-y="true" style="height: 300rpx;"
	    	 @scrolltoupper="handleScrollToUpper" @scrolltolower="handleScrollToLower" @scrollend="handleScrollEnd"
	    	 :scroll-into-view="timeDistance"  scroll-with-animation> -->
						<!-- <view class="scroll-view tn-flex tn-flex-wrap tn-flex-row-around" style="width: 100%;height: 100%;" :animation="buyAnimationData"> -->
						<view class="scroll-view tn-flex tn-flex-wrap tn-flex-row-around roll-center"
							style="width: 100%;">
							<view class="tn-flex tn-flex-row-around" v-for="(item, index) in buyRollList" :key="index"
								style="width: 100%; height: 56rpx;">
								<view class="justify-content-item tn-text-center tn-radius" style="height: 56rpx;">
									<tn-avatar size="sm" :src="item.avatar"></tn-avatar>
								</view>
								<text class="tn-flex tn-flex-row-center" style="margin: auto;">{{item.msg}}</text>
							</view>
						</view>
						<!-- </scroll-view> -->
					</view>
					<text class="tn-flex-row-left tn-padding" style="left:0">应付金额<text
							class="tn-color-purplered">{{ price }}</text> 元</text>
					<tn-form :labelWidth="140">
						<tn-form-item label="姓名" style="border: 1 solid red;">
							<input adjust-position="true" placeholder="请输入姓名" v-model="orderForm.name"></tn-input>
						</tn-form-item>
						<tn-form-item label="手机号" :borderBottom="false">
							<input adjust-position="true" placeholder="请输入手机号" type="number"
								v-model="orderForm.phone"></tn-input>
							<!-- <view slot="right" class="tn-flex tn-flex-col-center tn-flex-row-center">
	          <tn-button :fontSize="20" padding="10rpx" height="46rpx" backgroundColor="#01BEFF" fontColor="tn-color-white">获取验证码</tn-button>
	        </view> -->
						</tn-form-item>
					</tn-form>
					<button class="pay-botton" @click="submitOrder" :loading="payLoading"
						:disabled="payLoading">{{ pay_title }}</button>
					<!-- <tn-button shape="round" @click="closedPopup" width="220rpx" fontColor="#080808">关闭弹窗</tn-button> -->
				</view>
			</tn-popup>
			<wx-user-info-modal v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></wx-user-info-modal>
		</view>
	</view>
</template>

<script>
	import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue'
	import circleProgress from '@/components/czc-circle-progress/czc-circle-progress.vue'
	export default {
		components: {
			WxUserInfoModal,
			circleProgress
		},
		props: {
			params: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		name: 'Index',
		data() {
			return {
				popupTop: 0,
				shop_name: "",
				payLoading: false,
				rpx_rate: 1,
				buyRollH: 56,
				viewRollH: 1,
				aid: 18,
				sid: 1,
				share: {
					title: '我是子页面分享',
					path: '/home/index?fid=',
					imageUrl: '../../static/day_icon.png'
				},
				// 天
				dayRate: 80,
				widths: 62,
				breadth: 6,
				dayActiveColor: '#892FE8',
				dayIcon: "../../static/day_icon.png",
				days: 10,
				// 时
				hourRate: 20,
				hourActiveColor: '#FFCA28',
				hourIcon: "../../static/hour_icon.png",
				hours: 10,
				// 分
				minuteRate: 80,
				minuteActiveColor: 'blue',
				minuteIcon: "../../static/min_icon.png",
				minutes: 10,
				// 秒
				secondRate: 80,
				secondActiveColor: '#31E749',
				secondIcon: "../../static/sec_icon.png",
				seconds: 10,
				//曲线
				redQX: "http://43.138.221.24/resimage/red.png",
				puQX: "http://43.138.221.24/resimage/pu.png",
				// 数量
				views_num: 0,
				buy_num: 0,
				pay_title: "支付",
				detail_image: "http://43.138.221.24/resimage/nopicture.gif",
				support_qrcode: "http://43.138.221.24/resimage/nopicture.gif",
				posterImg: "http://43.138.221.24/resimage/nopicture.gif",
				support_mobile: "",
				expire_time: "2025-01-01 00:00:00",
				countdownInterval: null,
				days_rate: 70,
				price: "0.00",

				showAuthorizationModal: false,

				// 弹窗 start
				title: '',
				content: '',
				show: false,
				hbshow: false,
				payBtnShow: true,
				payShow: false,
				mode: 'left',
				backgroundColor: '',
				width: '',
				height: '',
				borderRadius: 10,
				closeBtn: true,
				closeBtnIcon: 'close',
				closeBtnPosition: 'top-right',
				maskCloseable: true,

				backgroundColor: '',
				width: '84%',
				padding: '',
				radius: 12,
				fontColor: '',
				fontSize: 0,
				button: [{
						text: '取消',
						backgroundColor: '#A4E82F',
						fontColor: '#FFFFFF'
					},
					{
						text: '确定',
						backgroundColor: 'tn-bg-indigo',
						fontColor: '#FFFFFF'
					}
				],
				closeBtn: true,
				maskCloseable: true,
				zoom: true,
				custom: false,

				tips: ['无需依赖额外的样式文件', '使用tn-modal组件'],
				// 弹窗 end
				animation: null,
				animationData: {},
				buyAnimationData: {},
				buyAnimation: null,
				setIntervalObj: null,
				setTimeoutObj: null,
				buySetIntervalObj: null,
				buySetTimeoutObj: null,
				timeDistance: "scroll0",
				currentIndex: 0, // 记录当前显示的图片索引
				intervalId: null, // 存储定时器ID
				buyList: [],
				viewsList: [],
				buyRollList: [],
				copyBuyList: [],
				imagelist: [],
				cardCur: 0,
				isAndroid: true,
				swiperList: [],
				cardCur2: 0,
				orderForm: {
					shop_id: this.sid,
					activity_id: this.aid,
					name: "",
					phone: ""
				},
				openid: "",
				// ceshi1
				mid: "",
				gid: "",
				render: 0
			}
		},
		created() {
			console.log("params ", this.params)
			this.mid = this.params.mid
			this.gid = this.params.id || 2
			uni.setStorageSync('gid', this.gid)
			const systemInfo = uni.getSystemInfoSync()
			if (systemInfo.system.toLocaleLowerCase().includes('ios')) {
				this.isAndroid = false
			} else {
				this.isAndroid = true
			}
			var appInfo = uni.getStorageSync('appInfo')
			if (appInfo) {
				var _obj = JSON.parse(appInfo)
				this.aid = _obj.aid
				this.sid = _obj.sid
			}
			let _that = this
			wx.login({
				success(res) {
					console.log('wxlogin~', res)
					if (res.code) {
						//发起网络请求
						_that.$api.userCheck({
							code: res.code
						}).then((res) => {
							if (res.data.error == 1) {
								_that.render = 1
								_that.showAuthorizationModal = true
								_that.openid = res.data.cid.substr(8)
								if (_that.params.mid) {
									_that.$api.toast({
										id: _that.params.mid,
										goodsid: _that.gid
									})
								}
								_that.getActivityInfo()
							} else {
								let token = res.data.authkey
								delete res.data.authkey
								uni.setStorageSync('token', token)
								uni.setStorageSync('userInfo', res.data)
								_that.$api.queryCompleteOrder().then(res => {
									if (res.data.hasOwnProperty('gid')) {
										_that.render = 2
										_that.gid = res.data.gid
										_that.getActivityInfo()
										// _that.goodsDesc = res.data.desc
									}else{
										_that.render = 1
										_that.getActivityInfo()
									}
								})
							}
							// let userInfo = res.data.user_info
							// if(userInfo.level > 0){
							//  _that.payBtnShow = false
							// }
							// uni.setStorageSync('appInfo', JSON.stringify({aid: userInfo.activity_id, sid: userInfo.shop_id}))
							// resolve(token)
							// _that.share = res.data.share
							// uni.setStorageSync("share", JSON.stringify(_that.share))
							// _that.$emit('change-share', _that.share);
						}).catch(() => uni.setStorageSync('token', ''));
					} else {
						console.log('登录失败！' + res.errMsg)
					}
				}
			})
			// this.$api.appInfo({shop_id: this.params.sid || this.sid, 
			// activity_id: this.params.aid || this.aid, 
			// noncestr: Date.now()}).then((res)=>{
			//  // this.loading = false;
			//  console.log('request success', res)
			//  uni.showToast({
			//   title: '请求成功',
			//   icon: 'success',
			//   mask: true
			//  });
			//  // this.res = '请求结果 : ' + JSON.stringify(res);
			//  this.swiperList = res.data.data.banner
			//  this.views_num = res.data.data.show_data.views_num
			//  this.buy_num = res.data.data.show_data.buy_num
			//  this.pay_title = res.data.data.name
			//  this.detail_image = res.data.data.detail
			//  this.expire_time = res.data.data.expire_time
			//  this.price = res.data.data.price
			//  this.share = res.data.data.share
			//  this.$emit('change-share', this.share);
			//  this.countDownTime()
			//  console.log(this.swiperList)
			// }).catch((err)=>{
			//  this.loading = false;
			//  console.log('request fail', err);
			// })
		},
		beforeDestroy() {
			this.clearTimeTask()
		},
		mounted() {
			let _that = this
			// uni.getSystemInfo({
			// 	success: function (res) {
			// 		// console.log(res.screenHeight); //屏幕高度  注意这里获得的高度宽度都是px 需要转换rpx
			// 		// console.log(res.windowWidth);  //可使用窗口宽度
			// 		// console.log(res.windowHeight); //可使用窗口高度
			// 		// console.log(res.screenWidth); //屏幕宽度
			// 		_that.rpx_rate = 750 / res.windowWidth//将px 转换rpx
			// 		console.log(_that.rpx_rate)
			// 	}
			// });
			this.getUsers()
			// this.startAutoPlay(); // 页面加载完成后开始自动播放
			// this.startAutoScroll()
			// let animation = uni.createAnimation({
			// 	transformOrigin: "50% 50%",
			// 	duration:1000,
			// 	timingFunction: "linear",
			// 	delay: 0
			// })
			// this.animation = animation;
			// this.buyAnimation = animation;
			// this.animations();
			// this.buyAnimations()

		},
		methods: {
			initOrderForm() {
				this.orderForm = {
					shop_id: this.gid,
					name: "",
					phone: "",
				}
			},
			clearTimeTask() {
				console.log("销毁回收")
				if (this.buySetIntervalObj) {
					clearInterval(this.buySetIntervalObj)
					this.buySetIntervalObj = null;
				}
				if (this.buySetTimeoutObj) {
					clearTimeout(this.buySetTimeoutObj)
					this.buySetTimeoutObj = null;
				}
			},
			validatePhone(phone) {
				var reg = /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/;
				if (!reg.test(phone)) {
					return false
				}
				return true

			},
			orderPay(id) {
				const _that = this
				this.$api.orderPay({
					id
				}).then(res => {
					if (!res.error) {
						const {
							timeStamp,
							nonceStr,
							package: p,
							signType,
							paySign
						} = res.data.wechat.payinfo
						wx.requestPayment({
							timeStamp,
							nonceStr,
							package: p,
							signType,
							paySign,
							success: (res1) => {
								// this.getDetail(res.data.id)
								console.log(res1)
								// _that.initOrderForm()
								_that.payLoading = false
								_that.closedPopup()
								_that.payBtnShow = false
								_that.render = 2
							},
							fail(res) {
								// console.log(res)
								// _that.$api.orderCancel({
								// 	order_sn: pay_data.order_sn,
								// 	noncestr: Date.now()
								// }).then((res) => {
								// 	console.log("订单取消支付 ", res)
								// }).catch(() => _that.payLoading = false)
								_that.payLoading = false;
							}
						})
					}
				})
			},
			handleSubmit(data) {
				let postData = {
					id: "",
					// goods[0]: data.goods[0].goods[0],
					gdid: undefined,
					dispatchtype: 0,
					fromcart: 0,
					carrierid: 0,
					addressid: 0,
					couponid: 0,
					submit: true,
					packageid: data.packageid,
					giftid: data.giftid,
					diydata: false,
					fromquick: 0,
					mid: this.params.mid,
					name: this.orderForm.name,
					phone: this.orderForm.phone
					// merchid: 
					// authkey:
				}
				Object.keys(data.goods[0].goods[0]).forEach(key => {
					postData[`goods[0][${key}]`] = data.goods[0].goods[0][key]
				})
				this.$api.orderSubmit(postData).then(res => {
					if (res.data.error == 0) {
						this.orderPay(res.data.orderid)
					} else if (res.data.message) {
						uni.showToast({
							title: res.data.message,
							icon: 'error'
						})
					}
				})
			},
			submitOrder() {
				if (!this.orderForm.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'error',
						mask: true
					});
					return
				}
				if (!this.orderForm.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'error',
						mask: true
					});
					return
				}
				if (!this.validatePhone(this.orderForm.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'error',
						mask: true
					});
					return
				}
				this.payLoading = true
				let _that = this
				this.$api.orderCreate({
					shop_id: this.gid
				}).then((res) => {
					// var pay_data = res.data
					if(res.data.message=='未登录'){
						uni.showToast({
							title: '用户不存在',
							icon: 'error',
							mask: true
						});
						this.payLoading = false
						this.showAuthorizationModal = true
						return
					}else{
						this.handleSubmit(res.data)
					}
				}).catch((err) => {
					_that.payLoading = false;
					console.log('request fail', err);
					uni.showToast({
						title: err.message,
						icon: 'error',
						mask: true
					});

				})

			},
			getUsers() {
				this.$api.users().then(res => {
					if (res.data) {
						let respList = []
						if (res.data.length > 0 && res.data.length < 100) {
							let n = 100 - res.data.length
							let m = Math.floor(n / res.data.length)
							for (let i = 0; i < m; i++) {
								respList.push(...res.data)
							}
						} else {
							respList = res.data
						}
						const list = []
						if (respList.length > 0) {
							const len = Math.ceil(respList.length / 5)
							for (let i = 0; i < len; i++) {
								list[i] = list[i] || []
								for (let j = 0; j < 5; j++) {
									if (respList[i * 5 + j]) {
										list[i].push(respList[i * 5 + j].avatar)
									}
								}
							}
						}
						this.imagelist = list
					}
				})
			},
			getActivityInfo() {
				this.$api.appInfo({
					id: this.gid
				}).then((res) => {
					// this.loading = false;
					console.log('request success', res)
					// uni.showToast({
					//  title: '请求成功',
					//  icon: 'success',
					//  mask: true
					// });
					// this.res = '请求结果 : ' + JSON.stringify(res);
					this.shop_name = res.data.goods.title
					this.swiperList = res.data.goods.thumbs
					this.views_num = res.data.goods.sales * 255 // 255先写死
					this.buy_num = res.data.goods.sales
					// this.viewsList = res.data.goods.show_data.views_list
					// this.buyList = res.data.goods.show_data.buy_list
					// this.buyRollList = res.data.goods.buy_roll_list
					this.pay_title = res.data.goods.btntext
					// this.pay_title = res.data.goods.title
					this.detail_image = res.data.goods.content
					this.support_mobile = res.data.goods.bindphone
					this.support_qrcode = res.data.goods.bindwxcode
					this.expire_time = res.data.goods.statustimeend * 1000
					this.price = res.data.goods.marketprice
					this.countDownTime()
					console.log(this.swiperList)
				}).catch((err) => {
					this.loading = false;
					console.log('request fail', err);
				})
			},
			//打开支付弹框
			showPayPopup() {
				this.payBtnShow = false
				this.payShow = true
			},
			closedPopup() {
				// debugger
				if (this.buySetIntervalObj) {
					clearInterval(this.buySetIntervalObj)
					this.buySetIntervalObj = null;
				}
				if (this.buySetTimeoutObj) {
					clearTimeout(this.buySetTimeoutObj)
					this.buySetTimeoutObj = null;
				}
				this.payShow = false
				this.payBtnShow = true
				this.initOrderForm()
				// this.buyList = this.copyBuyList
			},
			// 打开模态框
			openModal() {
				this.show = true
			},
			// 弹出模态框
			showModal(event) {
				this.openModal()
			},
			// 打开海报弹窗
			showPosterModal(event) {
				uni.showLoading({
					title: '海报生成中'
				});
				this.$api.posterCreate({
					id: this.gid
				}).then((res) => {
					// console.log("生成海报 ", res)
					this.posterImg = res.data.url
					uni.hideLoading()
					this.hbshow = true
				}).catch(() => this.posterImg = '')
			},
			// 关闭海报弹窗
			closeHbLandscape() {
				this.hbshow = false
			},
			// 关闭压屏窗
			closeLandscape() {
				this.show = false
			},
			//倒计时
			countDownTime() {
				const targetDate = new Date(this.expire_time); // 目标日期时间
				if (this.countdownInterval) {
					clearInterval(this.countdownInterval)
				}
				this.countdownInterval = setInterval(() => {
					const now = new Date().getTime();
					const distance = targetDate - now;
					if (distance <= 0) {
						clearInterval(this.countdownInterval);
						this.dayRate = 100
						this.hourRate = 100
						this.minuteRate = 100
						this.secondRate = 100
						// this.remainingTime = "倒计时结束";
					} else {
						this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
						this.dayRate = Math.floor((365 - this.days) / 365 * 100)
						this.hours = Math.floor(
							(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
						);
						this.hourRate = Math.floor((24 - this.hours) / 24 * 100);
						this.minutes = Math.floor(
							(distance % (1000 * 60 * 60)) / (1000 * 60)
						);
						this.minuteRate = Math.floor((60 - this.minutes) / 60 * 100);
						this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
						this.secondRate = Math.floor((60 - this.seconds) / 60 * 100);
						// this.remainingTime = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
					}
				}, 1000);
			},
			// 浏览滚动
			animations() {
				console.log("开始")
				let i = -1;
				let j = 0;
				let sum = this.imagelist.length;
				let _that = this
				if (this.setIntervalObj) {
					this.setIntervalObj = null;
					this.setTimeoutObj = null;
				}
				this.setIntervalObj = setInterval(() => {
					console.log("定时任务，", this.imagelist.length)
					if (i == sum) {
						i = 0;
					}
					_that.setTimeoutObj = setTimeout(() => {
						console.log("定时任务")
						let arr = this.imagelist.splice(i, 1)[0];
						this.imagelist.push(arr);
						this.imagelist.splice(i, 0, arr);
					}, 1200)
					i++;
					j++;
					this.animation.translateY(-(105 / this.rpx_rate) * j).step()
					this.animationData = this.animation.export();
				}, 2500)
			},
			// 购买滚动
			buyAnimations() {
				console.log("开始")
				let i = -1;
				let j = 0;
				if (this.buySetIntervalObj) {
					this.buySetIntervalObj = null;
					this.buySetTimeoutObj = null;
				}
				let sum = this.buyRollList.length;
				let _that = this
				this.buySetIntervalObj = setInterval(() => {
					console.log("定时任务")
					if (i == sum) {
						i = 0;
					}
					// if(_that.buySetTimeoutObj){
					// 	_that.buySetTimeoutObj = null;
					// }
					this.buySetTimeoutObj = setTimeout(() => {
						console.log("定时任务")
						let arr = this.buyRollList.splice(i, 1)[0];
						this.buyRollList.push(arr);
						this.buyRollList.splice(i, 0, arr);
					}, 1000)
					i++;
					j++;
					this.buyAnimation.translateY(-(54 / this.rpx_rate) * j).step()
					this.buyAnimationData = this.buyAnimation.export();
				}, 2500)
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// resume
			resume(e) {
				this.cardCur2 = e.detail.current
			},
			// 获取到的用户信息
			updatedUserInfoEvent(info) {
				console.log('获取到的用户信息', info)
				this.showAuthorizationModal = false
				this.$api.loginRequest({
					cid: this.openid,
					type: 1,
					nickName: info.nickname,
					avatarUrl: info.avatarB64,
					mid: this.params.mid || 0
				}).then(sub => {
					let token = sub.data.authkey
					delete sub.data.authkey
					uni.setStorageSync('userInfo', sub.data)
					uni.setStorageSync('token', token)
					this.getUsers()
				})
			},
			// 拨打电话
			telephone(e) {
				console.log("打电话 ", e)
				let phone = this.support_mobile
				uni.makePhoneCall({
					phoneNumber: phone, //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);
					}
				})
			},
			// 跳转
			tn(e) {
				// 判断是否登录
				// if(true){
				// 	this.showAuthorizationModal = true
				// 	return
				// }
				uni.navigateTo({
					url: e,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-index {
		max-height: 100vh;
	}

	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}


	/* 轮播视觉差 start */
	.card-swiper {
		height: 540rpx !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		// padding: 0rpx 30rpx 90rpx 30rpx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item-text {
		margin-top: -320rpx;
		text-align: center;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 10rpx;
		transform: translate(100rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-text {
		margin-top: -320rpx;
		width: 100%;
		transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: #FFFFFF;
		opacity: 0.6;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: -60rpx;
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
		background-color: #FFFFFF;
	}

	/* 简历推荐 start */
	.card-swiper2 {
		height: 420rpx !important;
		overflow: hidden;
	}

	.card-swiper2 swiper-item {
		width: 680rpx !important;
		left: 30rpx;
		box-sizing: border-box;
		overflow: initial;
		padding: 0 0rpx 40rpx 0;
	}

	.card-swiper2 swiper-item .swiper-item1 {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(0.97);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		background-color: #E7FAFE;
	}

	.card-swiper2 swiper-item.cur .swiper-item1 {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.card-swiper2 swiper-item .swiper-item2 {
		margin-top: -180rpx;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 50%;
		transform: translate(510rpx, -160rpx) scale(0.9, 0.9);
		transition: all 0.3s ease 0s;
		will-change: transform;
	}

	.card-swiper2 swiper-item.cur .swiper-item2 {
		margin-top: -180rpx;
		width: 100%;
		transform: translate(510rpx, -150rpx) scale(0.9, 0.9);
		transition: all 0.3s ease 0s;
		will-change: transform;
	}

	.card-swiper2 swiper-item .swiper-item-text {
		margin-top: -270rpx;
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10rpx;
		transform: translate(30rpx, -20rpx) scale(0.8, 0.8);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper2 swiper-item.cur .swiper-item-text {
		margin-top: -270rpx;
		width: 100%;
		transform: translate(20rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}



	/* 底部tabbar假阴影 start*/
	.bg-tabbar-shadow {
		background-image: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.1) 10rpx, #FFFFFF, #FFFFFF);
		position: fixed;
		bottom: 0;
		height: 450rpx;
		width: 100vw;
		z-index: -1;
	}

	/* 图标容器12 start */
	.tn-three {
		position: absolute;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		transform: translate(-38rpx, -20rpx) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);
		text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.icon12 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);


				}
			}
		}
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 60%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {
				// color: #AAAAAA;
			}
		}
	}

	.logo-image {
		width: 65rpx;
		height: 65rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
	}

	/* 自定义导航栏内容 end */


	/* 热门图片 start*/
	.image-tuniao1 {
		padding: 165rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-tuniao2 {
		padding: 75rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-tuniao3 {
		padding: 90rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	/* 胶囊banner*/
	.image-capsule {
		padding: 100rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-piccapsule {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 20rpx 20rpx 0 0;
	}

	/* 标题 start */
	.nav_title {
		-webkit-background-clip: text;
		color: transparent;

		&--wrap {
			position: relative;
			display: flex;
			height: 120rpx;
			font-size: 46rpx;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background-image: url(https://resource.tuniaokj.com/images/title_bg/title00.png);
			background-size: cover;
		}
	}

	/* 标题 end */

	/* 业务展示 start */
	.tn-info {

		&__container {
			margin-top: 10rpx;
			margin-bottom: 50rpx;
		}

		&__item {
			width: 47.7%;
			margin: 15rpx 0rpx 30rpx 0rpx;
			padding: 40rpx 30rpx;
			border-radius: 10rpx;


			position: relative;
			z-index: 1;

			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
			}

			&__left {

				&--icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					font-size: 40rpx;
					margin-right: 20rpx;
					position: relative;
					z-index: 1;

					&::after {
						content: " ";
						position: absolute;
						z-index: -1;
						width: 100%;
						height: 100%;
						left: 0;
						bottom: 0;
						border-radius: inherit;
						opacity: 1;
						transform: scale(1, 1);
						background-size: 100% 100%;
						background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
					}
				}

				&__content {
					font-size: 25rpx;

					&--data {
						color: rgba(255, 255, 255, 0.5);
						margin-top: 5rpx;
						// font-weight: bold;
					}
				}
			}

			&__right {
				&--icon {
					position: absolute;
					right: 0rpx;
					top: 50rpx;
					font-size: 100rpx;
					width: 108rpx;
					height: 108rpx;
					text-align: center;
					line-height: 60rpx;
					opacity: 0.15;
				}
			}

			&__bottom {
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
				border-radius: 0 0 10rpx 10rpx;
				position: absolute;
				width: 85%;
				line-height: 15rpx;
				left: 50%;
				bottom: -15rpx;
				transform: translateX(-50%);
				z-index: -1;
				text-align: center;
			}
		}
	}

	/* 业务展示 end */

	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.tabbar .action {
		font-size: 22rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		overflow: initial;
	}

	.bar-center {
		animation: suspension 3s ease-in-out infinite;
	}

	.roll-center {
		-webkit-animation: roll 5s infinite;
		animation: roll 5s infinite;
	}

	.buy-roll-center {
		animation: buyRoll 5s infinite;
	}

	@keyframes buyRoll {

		0%,
		100% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	@-webkit-keyframes roll {

		0%,
		100% {
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}

		25% {
			-webkit-transform: translateY(-12.5%);
			transform: translateY(-12.5%);
		}

		50% {
			-webkit-transform: translateY(-25%);
			transform: translateY(-25%);
		}

		75% {
			-webkit-transform: translateY(-37.5%);
			transform: translateY(-37.5%);
		}

		100% {
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}
	}

	@keyframes roll {

		0%,
		100% {
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}

		25% {
			-webkit-transform: translateY(-12.5%);
			transform: translateY(-12.5%);
		}

		50% {
			-webkit-transform: translateY(-25%);
			transform: translateY(-25%);
		}

		75% {
			-webkit-transform: translateY(-37.5%);
			transform: translateY(-37.5%);
		}

		100% {
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}
	}

	@keyframes suspension {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-0.8rem);
		}
	}

	.tabbar .action .bar-icon {
		width: 100rpx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 10rpx;
		text-align: center;
		font-size: 42rpx;
		// line-height: 50rpx;
	}

	.tabbar .action .bar-icon image {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}

	.tabbar .action .bar-circle {
		position: relative;
		display: block;
		margin: 0rpx auto 0rpx;
		text-align: center;
		font-size: 52rpx;
		line-height: 90rpx;
		// background-color: #01BEFF;
		width: 100rpx !important;
		height: 100rpx !important;
		overflow: hidden;
		// border-radius: 50%;
		// box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
		//   0px -8px 40px rgba(255, 255, 255, 1),
		//   inset 0px -10px 10px rgba(70,23,129, 0.05),
		//   inset 0px 10px 20px rgba(255, 255, 255, 1);
		// box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
	}

	.tabbar .action .bar-circle image {
		width: 100rpx;
		height: 100rpx;
		display: inline-block;
		margin: 0rpx auto 0rpx;
	}

	/* 按钮 */
	.button-0 {
		background-color: rgba(255, 255, 255, 0.8);
		position: fixed;
		padding: 10rpx;
		/* bottom:200rpx;
      right: 20rpx; */
		bottom: 32%;
		// right: 0rpx;
		width: 110rpx;
		height: 110rpx;
		left: 10rpx;
		z-index: 1001;
		border-radius: 10rpx;
		border: solid 1rpx white;
		border-right: none;
		// padding: 0;
	}

	.button-1 {
		background-color: rgba(233, 192, 201, 0.7);
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		bottom: 30%;
		right: 0rpx;
		z-index: 1001;
		border-radius: 100rpx 0 0 100rpx;
		border: solid 1rpx white;
		border-right: none;
	}

	.button-2 {
		background-color: rgba(233, 192, 201, 0.7);
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		bottom: 24%;
		right: 0rpx;
		z-index: 1001;
		border-radius: 100rpx 0 0 100rpx;
		border: solid 1rpx white;
		border-right: none;
	}

	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;

			// border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 140rpx;
				height: 85rpx;
				font-size: 50rpx;
				// border-radius: 50%;
				margin-bottom: 18rpx;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}

			&--icon2 {
				width: 110rpx;
				height: 110rpx;
				font-size: 50rpx;
				// border-radius: 50%;
				// margin-bottom: 18rpx;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}
		}
	}

	/* 流星+悬浮 */
	.nav-index-button {
		animation: suspension 3s ease-in-out infinite;
		z-index: 999999;


		&__content {
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;
				transform: scale(0.85);

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					// background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
				}
			}
		}

		&__meteor {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100rpx;
			height: 100rpx;
			transform-style: preserve-3d;
			transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);

			&__wrapper {
				width: 100rpx;
				height: 100rpx;
				transform-style: preserve-3d;
				animation: spin 20s linear infinite;
			}

			&__item {
				position: absolute;
				width: 100rpx;
				height: 100rpx;
				border-radius: 1000rpx;
				left: 0;
				top: 0;

				&--pic {
					display: block;
					width: 100%;
					height: 100%;
					background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc1.png) no-repeat center center;
					background-size: 100% 100%;
					animation: arc 4s linear infinite;
				}
			}
		}
	}


	@keyframes suspension {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-0.6rem);
		}
	}

	@keyframes spin {
		0% {
			transform: rotateX(0deg);
		}

		100% {
			transform: rotateX(-360deg);
		}
	}

	@keyframes arc {
		to {
			transform: rotate(360deg);
		}
	}

	.news-img {
		z-index: -1;
		padding-bottom: 40rpx;

		image {
			width: 100%;
			// margin: 20rpx 0;
			// height: 3373rpx;
			// z-index: -1;
		}
	}

	.list {
		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				// margin-right: 18rpx;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.list-image-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list-image-text {
		.list {
			&__left {
				&__image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}

	.popup-content {
		height: 100%;
		width: auto;
		display: flex;
		justify-content: center;
		align-items: center;

		&--center {
			padding: 150rpx 50rpx;
		}
	}

	.custom-modal-content {
		width: 100%;
		height: 100%;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.icon {
			font-size: 100rpx;
			margin-bottom: 20rpx;
			color: $tn-main-color;
		}

		.text {
			font-size: 40rpx;
		}
	}

	.pay-botton {
		border-radius: 50rpx;
		width: 80%;
		background-color: #000000;
		color: #ffffff;
		height: 80rpx;
		margin: 20rpx;
		line-height: 80rpx;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
		font-size: 32rpx;
	}
</style>